<template>
    <div style="max-width: 450px; margin: 0 auto;background-color: #f4f4f4; height: 100vh;">
        <div style="background-color: #008CA0; height: 3.5rem; text-align: center;font-size: 1.5rem;line-height: 3.5rem;"></div>
        <div>
            <van-nav-bar
            title="登录"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            />
        </div>
        <div style="margin-top: 5rem;margin-left: 2rem; margin-right: 2rem;">
            <van-form>
                <van-cell-group inset>
                    <van-field
                    v-model="loginInfo.username"
                    name="用户名"
                    label="用户名"
                    placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    />
                    <van-field
                    v-model="loginInfo.password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <van-field
                    v-model="loginInfo.verify"
                    name="校验码"
                    label="校验码"
                    placeholder="校验码"
                    :rules="[{ required: true, message: '请填写校验码' }]"
                    />
                </van-cell-group>
                <div style="text-align: center; margin: 1rem auto;">
                    <VerificationCode/>
                </div>
                <div style="height: 2rem; text-align: center; color: red;">
                    <span v-if="msg">{{ msg }}</span>
                </div>
                <div>
                    <van-button type="primary" size="small" block @click="onLogin">提交</van-button>
                </div>
                <div style="text-align: right;">
                    <van-button type="warning" size="mini" @click="() =>router.push({path: '/m/register'})">注册账号</van-button>
                </div>
            </van-form>
        </div>
    </div>
    <BtyTabBar/>
</template>


<script setup>
import BtyTabBar from '@/components/BtyTabBar.vue';
import VerificationCode from '@/views/VerificationCode.vue';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { login} from '@/requests/index';
const onClickLeft = () => {
    router.push({path: '/'})
};
const router = useRouter();
const loginInfo = reactive({
  username: "",
  password: "",
  verify: ""
});
const msg = ref();
const onLogin = async()=>{
    const verify = window.localStorage.getItem('verify');
    if (verify !== loginInfo.verify ) {
        msg.value = "验证码错误";
        return;
    };
    const res = await login(loginInfo);
    if (res.status === 2000){
        console.log(res)
        window.localStorage.setItem("token", res.data.token);
        window.localStorage.setItem("username", res.data.user_info.username);
        router.push({path: '/'});
        setTimeout(() => {
            window.location.reload();
        }, 100);
      } else {
        msg.value = "用户名或密码错误";
      }
};
</script>
